<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./css/common.css" />

		<script src="../dist/mcu.js"></script>
		<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
		<script src="https://unpkg.com/ant-design-vue@1.4.10/dist/antd.min.js"></script>
		<link
			href="https://unpkg.com/ant-design-vue@1.4.10/dist/antd.min.css"
			rel="stylesheet"
			type="text/css" />
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="map">
				<div class="mapTools">
					<div
						class="item"
						v-for="item in tools"
						:key="item.key"
						@click="handlerClick(item)">
						<a-dropdown>
							<a class="ant-dropdown-link" @click.prevent> {{item.label}} </a>
							<template #overlay>
								<a-menu>
									<a-menu-item
										v-for="v in item.children"
										:key="v.key"
										@click="handleSelected(v)">
										<a href="javascript:;">{{v.label}}</a>
									</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
				</div>
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						jointOl: null,
						tools: [],
					};
				},
				methods: {
					handlerClick(item) {
						if (item.children) {
							return;
						}
						switch (item.key) {
							case "clear":
								this.delDraw();
								break;
							case "screenShot":
								this.screenshot();
								break;
							case "location":
								this.getLocation();
								break;
							default:
								break;
						}
					},
					handleSelected(item) {
						if (
							["LineString", "Polygon", "Rectangle", "Circle"].includes(
								item.key
							)
						) {
							this.drawImage(item.key);
						} else if (
							["tiandituVecLayer", "tiandituImgLayer"].includes(item.key)
						) {
							this.changeBaseMap(item.key);
						}
					},
					changeBaseMap(key) {
						this.jointOl.layerManage.showLayer(key);
						this.jointOl.clusterPoint.init();
					},
					drawImage(key) {
						this.jointOl.drawManage.drawImage(key);
					},
					delDraw() {
						this.jointOl.drawManage.delDraw();
					},
					screenshot() {
						this.jointOl.screenShot.drawMap("截图");
					},
					getLocation() {
						this.jointOl.drawManage.getLocation();
					},
				},
				mounted() {
					const test = new MCU.Test("测11试");
					test.log();
					this.jointOl = new MCU.JointOl("map", {
						projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
						center: [102.712251, 25.040609], // 昆明坐标
						minZoom: 5, // 地图缩放最小级别
						zoom: 12, // 地图缩放级别（打开页面时默认级别）
						maxZoom: 30, // 地图缩放最大级别
					});
					// window.$jointOl = jointOl;
					const layers = new MCU.TdtLayer();
					this.jointOl.layerManage.init(layers);

					this.tools = new MCU.MapTools().tools;

					this.jointOl.clusterPoint.init();
					this.jointOl.echartCluster.init(echarts);
				},
				created() {},
			});
		</script>
		<script>
			// const test = new MCU.Test("测11试");
			// test.log();
			// const jointOl = new MCU.JointOl("map", {
			// 	projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
			// 	center: [102.712251, 25.040609], // 昆明坐标
			// 	minZoom: 10, // 地图缩放最小级别
			// 	zoom: 12, // 地图缩放级别（打开页面时默认级别）
			// 	maxZoom: 18, // 地图缩放最大级别
			// });
			// window.$jointOl = jointOl;
			// const layers = new MCU.TdtLayer();
			// this.$jointOl.layerManage.init(layers);

			// this.$tools = new MCU.MapTools().tools;
		</script>
		<script>
			console.log("window.$tools ", this.$tools);
		</script>
	</body>
</html>
